<template>
    <div class="player">
        <h1>{{ name }}</h1>
        <h2 style="color: red">{{ hp }}</h2>
        <h2 v-if="identity !== 'unknown'" style="color: blue">{{ identity }}</h2>
        <ul v-for="s of skillsConfig" :key="s">
            <li>{{ s }}</li>
        </ul>
    </div>
</template>
<script lang="ts">
    import { defineComponent, onBeforeUpdate, onMounted } from 'vue';
    // import { forOwn } from 'lodash-es';
    import usePlayer from '@hooks/player/player';

    // import mitt from '../../utils/mitt';

    export default defineComponent({
        emits: {
            update(payload: player) {
                return true;
            },
        },
        setup(props, ctx) {
            const $emit = ctx.emit;
            // const arr = ['sunce', 'guojia', 'caiwenji'];
            const player = usePlayer();
            // const { on, emit } = player.eHub;
            // on('prepare', data => {
            //     forOwn(data, (v, k) => {
            //         player[k].value = v.value;
            //     });
            // });
            // on('setHero', () => {
            //     setTimeout(() => {
            //         player.init(arr[player.seat.value!]);
            //         emit('setHeroDone', arr[player.seat.value!]);
            //     }, 1000);
            // });
            // on('*', (fn, params) => {
            //     if (fn in player) {
            //         player[fn](params);
            //     }
            // });
            onMounted(() => {
                $emit('update', player);
            });
            onBeforeUpdate(() => {
                // console.log('player 已更新');
                $emit('update', player);
            });
            return {
                ...player,
            };
        },
    });
</script>
<style scoped lang="scss">
    .player {
        width: 150px;
        height: 220px;
        border: 2px solid blueviolet;
        border-radius: 5px;

        & h1 {
            color: blue;
        }
    }
</style>
